<template>
  <div class="feature-list">
    <header>
      <h1>地图要素管理面板</h1>
      <p>显示所有地图上的元素，可以进行重命名和删除</p>
    </header>
    <div class="search-section">
      <div class="search-box">
        <el-input class="search-input" placeholder="搜索要素名称..." v-model="searchKeyword" clearable @input="handleSearch">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>

      <div class="stats-card">
        <div class="stats-icon" style="background: #e1f0fa; color: #2980b9;">
          <i class="el-icon-place"></i>
        </div>
        <div class="stats-content">
          <h3>{{ filteredFeatures.length }}</h3>
          <p>个地图要素</p>
        </div>
      </div>

      <div class="stats-card">
        <div class="stats-icon" style="background: #fff3e0; color: #f39c12;">
          <i class="el-icon-pie-chart"></i>
        </div>
        <div class="stats-content">
          <h3>{{ featureTypesCount }}</h3>
          <p>种要素类型</p>
        </div>
      </div>
    </div>
    <div class="custom-table">
      <div class="table-header">
        <div class="header-cell">名称</div>
        <div class="header-cell">类型</div>
        <div class="header-cell property-header">属性</div>
        <div class="header-cell operation-header">操作</div>
      </div>
      <div class="table-body">
        <div v-for="(feature, index) in filteredFeatures" :key="feature.extData.id || index" class="table-row"
          @click="zoomToFeature(feature)">
          <div class="body-cell">{{ feature.extData.name }}</div>
          <div class="body-cell">
            <span :class="['feature-type-tag', feature.extData.style]">
              {{ feature.extData.typeName }}
            </span>
          </div>
          <div class="body-cell property-cell">
            <div class="property-content" :title="getFullProperties(feature)">
              <template>
                <div class="property-item" v-for="(prop, i) in getPropertiesArray(feature)" :key="i">

                  <i :class="getPropertyIcon(i)"></i> {{ prop }}
                </div>
              </template>
            </div>
          </div>
          <div class="body-cell operation-cell">
            <el-button size="mini" icon="el-icon-edit" @click.stop="renameFeature(feature)" class="action-btn" />
            <el-button size="mini" icon="el-icon-delete" @click.stop="removeFeature(feature)" class="action-btn"
              type="danger" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Getter } from "vuex-class";

@Component
export default class TabPanelFeature extends Vue {
  @Getter features;
  private searchKeyword = '';

  zoomToFeature(feature: any) {
    (this as any).$bus.$emit('zoomToFeature', feature);
  }

  private renameFeature(feature: any) {
    this.$prompt('输入新名称', '重命名', {
      inputValue: feature.extData.name,
      inputPattern: /\S+/,
      inputErrorMessage: '名称不能为空'
    }).then((obj: any) => {
      feature.extData.name = obj.value;
      this.$forceUpdate();
    }).catch((e) => {
      console.error(e);
    });
  }

  removeFeature(feature: any) {
    (this as any).$bus.$emit('removeFeature', feature);
  }

  get featureTypesCount() {
    const types = new Set();
    this.features.forEach(feature => {
      types.add(feature.extData.type);
    });
    return types.size;
  }

  get filteredFeatures() {
    if (!this.searchKeyword) {
      return this.features;
    }
    const keyword = this.searchKeyword.toLowerCase();
    return this.features.filter(feature =>
      feature.extData.name.toLowerCase().includes(keyword)
    );
  }

  // 格式化方法
  getPropertyIcon(index) {
    const icons = ['el-icon-location', 'el-icon-odometer', 'el-icon-map-location', 'el-icon-data-line'];
    return icons[index] || 'el-icon-info';
  }

  // 获取属性数组
  getPropertiesArray(feature: any): string[] {
    const type = feature.extData.type;
    const props: string[] = [];
    const category = feature.extData.category;

    if (type === 'AMap.Marker') {
      props.push(`坐标: ${feature.extData.location}`);
    }
    else if (type === 'Overlay.Circle') {
      props.push(`半径: ${feature.extData.radius}`);
      props.push(`中心点: ${feature.extData.center}`);
      props.push(`面积: ${feature.extData.area}`);
    }
    else if (type === 'Overlay.Polygon' && category) {
      props.push(`面积: ${feature.extData.area}`);
      props.push(`中心点: ${feature.extData.center}`);
    }
    else if (type === 'AMap.Polygon' || type === 'Overlay.Polygon') {
      props.push(`面积: ${feature.extData.area}`);
      props.push(`中心点: ${feature.extData.center}`);
    }
    else if (type === 'Overlay.Rectangle') {
      props.push(`宽度: ${feature.extData.width}`);
      props.push(`高度: ${feature.extData.height}`);
      props.push(`中心点: ${feature.extData.center}`);
    }
    else if (type === 'Overlay.Polyline') {
      props.push(`长度: ${feature.extData.lineLength}`);
    }
    return props;
  }


  handleSearch() {
    console.log('Searching for:', this.searchKeyword);
  }

  // 获取完整属性信息
  getFullProperties(feature: any): string {
    return this.getPropertiesArray(feature).join('\n');
  }

  // 计算多边形面
}
</script>

<style lang="scss" scoped>
.feature-list {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.custom-table {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-header {
  display: grid;
  grid-template-columns: 1fr 0.8fr 2fr 100px;
  background: #f5f7fa;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
  font-weight: 600;
  color: #606266;
  position: sticky;
  top: 0;
  z-index: 10;
}

.table-body {
  flex: 1;
  overflow-y: auto;
}

.table-row {
  display: grid;
  grid-template-columns: 1fr 0.8fr 2fr 100px;
  padding: 12px 0;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid #f0f2f5;

  &:hover {
    background: #f8fafc;
  }

  &:last-child {
    border-bottom: none;
  }
}

.header-cell,
.body-cell {
  padding: 0 15px;
  display: flex;
  align-items: center;
}

.property-header {
  padding-left: 18px;
  width: 100px;
}

.operation-header {
  justify-content: center;
}

.body-cell {
  color: #606266;
  font-size: 10px;
}

.property-cell {
  overflow: hidden;
}

.property-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 60px;
  overflow-y: auto;
  padding-right: 5px;

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c0c4cc;
    border-radius: 2px;
  }
}



.property-item {
  font-size: 10px;
  line-height: 1.6;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.search-box {
  display: flex;
  width: 100%;

}

.operation-cell {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.action-btn {
  padding: 5px;
  transition: transform 0.2s;

  &:hover {
    transform: scale(1.1);
  }

  &:active {
    transform: scale(0.95);
  }
}

.search-section {

  padding: 0px;
  width: 100%;
  background: #f8fafc;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.search-input {
  flex: 1;
  width: calc(100% - 50px);
  padding: 5px;
}

.stats-card {
  background: white;
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  height: 50px;
  gap: 5px;
  margin-bottom: 5px;
  width: calc(50% - 20px);
}

.stats-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.stats-content h3 {
  font-size: 12px;
  margin-bottom: 5px;
  text-align: center;
}

.stats-content p {
  font-size: 12px;
  color: #7f8c8d;
}

/* 响应式调整 */
@media (max-width: 768px) {

  .table-header,
  .table-row {
    grid-template-columns: 1.5fr 1fr 1.5fr 80px;
  }

  .header-cell,
  .body-cell {
    padding: 0 8px;
    font-size: 12px;
  }

  .property-content {
    max-height: 45px;
  }
}

header {
  background: linear-gradient(135deg, #3498db, #2c3e50);
  color: white;
  padding: 6px 10px;
  text-align: center;
}

header h1 {
  font-size: 14px;
  margin-bottom: 6px;
  font-weight: 600;
}

header p {
  font-size: 12px;
  opacity: 0.9;
  max-width: 700px;
  margin: 0 auto;
}

.feature-type-tag {
  padding: 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}

.marker-tag {
  background: #e1f0fa;
  color: #2980b9;
}

.circle-tag {
  background: #e8f5e9;
  color: #27ae60;
}

.polygon-tag {
  background: #fce4ec;
  color: #e84393;
}

.rectangle-tag {
  background: #fff3e0;
  color: #f39c12;
}

.polyline-tag {
  background: #f3e5f5;
  color: #8e44ad;
}
</style>